<template>
	<view class="container">
		<view class="con_header">
			<view class="header_text">
				<view class="">

					<text class="titletext" v-if="current==0">支付超时</text>
					<text class="titletext" v-else-if="current==1">待支付</text>
					<text class="titletext" v-else-if="current==2">订单进行中</text>
					<text class="titletext" v-else-if="current==3">服务完成，待评价</text>
					<text class="titletext" v-else-if="current==4">服务完成，交易成功</text>
				</view>
				<!-- <br/> -->
				<view class="time" v-if="current==1">付款倒计时： 00：30 ：00</view>
				<view class="time" v-else-if="current!=1 && current!=0">下单时间：2023-09-21 10:00:00</view>
				<!-- <view class="time" v-else-if="current==3">下单时间：2023-09-21 10:00:00</view> -->

			</view>
		</view>

		<view class="con_mian" :class="{ contop: current != 0 }">
			<view class="mian_top  mian_item">
				<view class="topitem" v-for="(item,indeex) in toplist " :key="item">
					<view class="image">
						<!-- 这个是图片 -->
					</view>
					<text>{{item}}</text>
				</view>


			</view>
			<view class="mian_centone mian_item">
				<view class="centone_top">
					<!-- 图标 -->
					<i class="icon"></i>
					<text class="name"> 王小二</text>
					<text class="phone"> 176648674636</text>
				</view>
				<view class="centone_fot">XXX省XXX市XXX区XXXXXXXXXXXX街道1854</view>
			</view>




			<view class="mian_centones mian_item">
				<view class="item_title">
					服务项目
				</view>
				<!-- 二级标题 -->
				<view class="item_firts">
					<view class="centen_text" style="margin:10px 0; color: #FF575B;font-size: 12px;">
						<text style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x1
					</view>
					<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
				</view>
				<!-- 时间 -->
				<view class="icontime">
					<i class="icon"></i>
					<text class="name"> 60分钟</text>
				</view>
				<view class="item_text">

					<text class="text_left">服务总时长</text>
					<text class="text_right">60分钟</text>
				</view>
				<view class="item_text">

					<text class="text_left">服务护工</text>
					<text class="text_right">护工名称</text>
				</view>
				<view class="item_text">

					<text class="text_left">服务时间</text>
					<text class="text_right">2023-09-20 18:00:00</text>
				</view>


			</view>

			<!-- 费用详情   -->
			<view class="mian_centones mian_item"
				style="margin: 0; border-radius:  10px 10px 0 0 ; padding-bottom: 2px;">
				<view class="item_title">
					费用详情
				</view>
				<!-- 二级标题 -->
				<view class="item_firts">
					<view class="centen_text" style="margin:10px 0; color: #FF575B;font-size: 12px;">
						<text style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目金额</text>x1
					</view>
					<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
				</view>


				<view class="item_text">

					<text class="text_left">项目金额</text>
					<text class="text_rightmoney">￥200.00</text>
				</view>
				<view class="item_text">

					<text class="text_left">出行费用</text>
					<text class="text_centen">打车</text>
					<text class="text_rightmoney">￥20.00</text>
				</view>
				<view class="item_text">

					<text class="text_left">备注</text>
					<text class="text_centen" style="">内容内容内容内容内容内容内容</text>
					<text class="text_right"></text>
				</view>
				<view class="item_text">

					<text class="text_left">支付方式</text>
					<text class="text_centen" style="">----</text>
					<text class="text_right"></text>
				</view>
			</view>
			<view class="mian_centones mian_item"
				style="margin:  0;border-top: 2px solid #DDDDDD;border-radius:  0 0  10px 10px; padding: 1px 15px;">
				<view class="item_text">

					<text class="text_left">订单总额</text>
					<text class="text_rightmoney">￥200.00</text>
				</view>
				<view class="item_text">

					<text class="text_left">优惠卷</text>
					<text class="text_rightmoney">-￥0.00</text>
				</view>
				<view class="item_text">

					<text class="text_left">实付金额</text>
					<text class="text_rightmoney">￥20.00</text>
				</view>
			</view>



			<!-- 订单信息 -->
			<view class="mian_centones mian_item" style="margin-top: 12px;">
				<view class="item_title">
					订单信息
				</view>

				<view class="item_textdingd">

					<text class="text_left">订单编号</text>
					<text class="text_right">123456789123456789 </text>
					<text class="copy">复制</text>
				</view>
				<view class="item_textdingd">

					<text class="text_left">下单时间</text>
					<text class="text_right">2023-09-21 10:00:00</text>
				</view>
				<view class="item_textdingd">

					<text class="text_left">付款时间</text>
					<text class="text_right"></text>
				</view>
				<view class="item_textdingd" v-if="current==0">

					<text class="text_left">取消时间</text>
					<text class="text_right">2023-09-20 18:00:00</text>
				</view>


			</view>


		</view>

		<!-- 底部 -->
		<view class="con_foot">
			<!-- <view class="" style="flex: 1;"> -->

			<view class="footbtn" @click="content=content1,show =true" v-if="current ==0 || current ==4">
				删除订单
			</view>
			<view class="footbtn" @click="content=content2,show =true" v-if="current ==1">
				取消订单
			</view>
			<view class="footbtn" @click="showpop =true" v-if="current ==2">
				取消订单
			</view>
			<view class="footbtn" @click="showpop =true" v-if="current ==3">
				投诉
			</view>
			<!--  -->
			<!-- </view> -->
			<!-- <view class="" style="flex: 1;"> -->

			<view class="footbtn" v-if="current ==0">
				再次购买
			</view>
			<view class="footbtn" v-if="current ==1">
				立即支付
			</view>
			<view class="footbtn" v-if="current ==2">
				联系TA
			</view>
			<view class="footbtn" v-if="current ==3">
				立即评价
			</view>
			<view class="footbtn" v-if="current ==4">
				再来一单
			</view>
		</view>

		<!-- 这里成功回调  与失败回调  到时候在写个方法去调接口，我这里只是改变状态而已 -->
		<u-modal :show="show" :title='content' :showCancelButton='true' @cancel='show =!show'
			@confirm='show =!show'></u-modal>



		<!-- 取消订单弹窗 -->


		<u-popup :show="showpop" @close="close" @open="open" mode="bottom" :closeable='true' :round="15">
			<view class="pop">

				<view class="poptitle">
					订单取消
				</view>
				<view class="item_text" v-for="item in 9" :key="item">
					<text>内容内容内容内容内容</text>
					<u-checkbox-group>
						<u-checkbox v-model="checked" shape="circle" activeColor='#FB774B'></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="item_text">
					<text>其他</text>
					<u-checkbox-group>
						<u-checkbox v-model="checked" shape="circle" ></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="pop_btn">
					<view class="btn">
					提交
					</view>
				</view>
			</view>
		</u-popup>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				toplist: ['护工接单', '护工出发', '护工到达', '开始服务', '服务完成'],
				show: false, // 按钮  确认与取消
				showpop: false, // 订单取消   底部出来
				content: '',
				content1: '你确定要删除该订单？',
				content2: '你确定要取消该订单？',
				
				current: 0, //进入界面，传进来的状态 ,===>状态码
			}
		},
		onLoad(option) {
			console.log(option.status);
			this.current = option.status
		},
		methods: {
			close() { //关闭回调
				this.showpop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
	}

	.container {
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
		position: relative;
		padding-bottom: 80px;
	}


	.con_mian {
		padding: 0 15px;
		margin-top: -65px;

		&.contop {
			margin-top: -45px;
		}

		.mian_item {
			background-color: #fff;
			border-radius: 10px;
			margin-bottom: 12px;
		}

		.mian_top {
			width: 100%;
			height: 100px;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 10px;
			justify-content: center;

			.topitem {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #333333;
				position: relative;

				&::before {
					content: '---';
					color: #000;
					position: absolute;
					top: 30%;
					left: -10%;
				}

				.image {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;
					background-color: #FB774B;
					margin-bottom: 5px;
				}
			}
		}

		.mian_centone {
			display: flex;
			flex-direction: column;
			min-height: 80px;
			padding: 14px 10px;

			.centone_top {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 14px;

				.icon {
					display: block;
					background-color: #FB774B;
					width: 16px;
					height: 16px;


				}

				.name {
					display: block;
					margin: 0 10px;
				}
			}

			.centone_fot {
				width: 100%;
				font-size: 14px;
				color: #333333;
				margin-top: 9px;
			}
		}




		.mian_centones {
			padding: 15px;

			.item_title {
				font-weight: bold;
				color: #333333;
				font-size: 15px;
			}

			.item_firts {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.icontime {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #666666;

				.icon {
					display: block;
					background-color: #FB774B;
					width: 16px;
					height: 16px;
					margin-right: 8px;
				}
			}
		}

		.item_text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;
			color: #333333;
			font-size: 14px;

			.text_left {
				min-width: 20%;
			}

			.text_right {
				font-weight: bold;
			}

			.text_rightmoney {
				color: #FF575B;
				font-weight: bold;
			}

			.text_centen {
				flex: 1;
				padding: 0 20px;
				display: flex;
				color: #333333;
				font-size: 14px;
				font-weight: bold;
				justify-content: flex-start;
			}
		}

		.item_textdingd {
			display: flex;
			color: #333333;
			font-size: 14px;
			align-items: center;
			margin: 10px 0;

			.text_left {
				min-width: 30%;
			}

			.text_right {
				font-weight: bold;
			}

			.copy {
				display: block;
				color: #FB774B;
				margin-left: 10px;
				font-weight: bold;
			}
		}

	}

	.topitem:first-child::before {
		display: none;
		content: "";
	}

	.con_header {
		min-height: 125px;
		background-color: #FB774B;
		padding-bottom: 65px;
		padding: 20px 15px;

		.header_text {
			.time {
				margin-top: 8px;
				display: block;
				height: 40px;
				font-weight: 0;
				font-size: 14px;
				color: #FFFFFF;
			}

			.titletext {
				color: #FFFFFF;
				// display: block;
				font-size: 18px;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				margin-bottom: 8px;
			}
		}
	}

	.con_foot {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 10px 15px;
		height: 80px;
		display: flex;
		align-items: flex-start;

		.footbtn {
			flex: 1;
			border-radius: 999px;
			background-color: #FB774B;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			color: #fff;
			height: 40px;

			&:first-child {
				margin-right: 50px;
				background: rgba(0, 0, 0, 0.05);
				color: #999;

			}
		}
	}


.pop{
		padding: 15px;
		position: relative;
	.poptitle{
		width: 100%;
		text-align: center;
		font-size: 17px;
		line-height:30px;
		margin-bottom: 15px	;
	}
	.item_text{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	.pop_btn{
		height: 40px;
		.btn{
			display: flex;
			height: 40px;
			border-radius: 999px;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			background-color: #FB774B;
		}
	}
}


</style>